<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 
            1.为何需要自定义指令? => 内置指令不满足要求

            2.自定义指令的语法规则 (获取元素焦点)
            https://cn.vuejs.org/v2/guide/custom-directive.html
                Vue.directive('focus',{
                    inserted:function(el){
                        // 获取元素的焦点
                        el.focus()
                    }
                })
                
                directive  => 注册或获取指令
                focus => 自己起的名称
                inserted => 钩子函数
                el => 所绑定的元素
            3. 自定义指令的用法
            <input type="text" v-focus >

            4.带参数的自定义指令(改变元素背景色)
                Vue.directive('color',{
                    inserted:function(el,binding){
                        el.style.backgroundColor = binding.value.color;
                    }
                })
            5. 指令的用法
                <input type="text" v-color='{color:"orange"}'>

         -->
        <div><input type="text" v-color='msg'></div>


    </div>

    <script lang="text/javascript">
        Vue.directive('color', {
            bind: function (el, binding) {
                // el.style.backgroundColor = binding.value;
                el.style.backgroundColor = binding.value.color;
                /*
                 {
                    "name":"color",
                    "rawName":"v-color",
                    "value":{"color":"orange"}, 
                    "expression":"{color:\"orange\"}",
                    "modifiers":{},
                    "def":{}
                }
                 */
                console.log(JSON.stringify(binding));
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {
                // msg:"orange"
                msg: { color: "orange" },
            },
        })
    </script>

</body>

</html>